<template>
  <div>
    <div>
      <el-button
        @click="changeViewHandler"
        type="primary"
        icon="ele-Plus"
        :disabled="category3Id === ''"
        >添加属性</el-button
      >
      <el-table :data="spuList" style="margin: 20px 0" stripe border>
        <el-table-column type="index" width="80" label="序号"></el-table-column>
        <el-table-column label="SPU名称" prop="spuName"></el-table-column>
        <el-table-column label="SPU描述" prop="description"> </el-table-column>
        <el-table-column label="操作" width="250">
          <template #="{ row }">
            <el-button
              type="success"
              icon="ele-Plus"
              @click="toSkuHandler(row)"
            ></el-button>
            <el-button
              type="warning"
              icon="ele-Edit"
              @click="toEditHandler(row)"
            ></el-button>
            <el-button
              type="info"
              icon="ele-InfoFilled"
              @click="toDialog(row)"
            ></el-button>
            <el-button
              type="danger"
              icon="ele-Delete"
              @click="deleteHandler(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:page-size="limit"
        :total="total"
        :page-count="totalPage"
        :page-sizes="[5, 10, 15]"
        layout="prev,pager,next,jumper,->,sizes,total"
        v-model:current-page="page"
      ></el-pagination>
    </div>
    <div>
      <el-dialog v-model="isDialog" :title="spuItem.spuName">
        <el-table :data="detailList">
          <el-table-column label="名称" prop="skuName"></el-table-column>
          <el-table-column label="价格" prop="price"></el-table-column>
          <el-table-column label="重量" prop="weight"></el-table-column>
          <el-table-column label="默认图片">
            <template #="{ row }">
              <img :src="row.skuDefaultImg" style="width: 100px" />
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
export default defineComponent({
  name: "List",
});
</script>
<script setup lang="ts">
//0、准备工作
import { ref, watch, watchEffect, computed } from "vue";
// 引用切换变量
import VIEW_TYPE from "../../viewType";
//引入req
import * as api from "@/api/spu";
import { reqfindBySpuId } from "@/api/sku";
//引入req类型
import type { SpuListType, recordsType } from "@/api/spu";
import type { findBySpuIdType } from "@/api/sku";
//引入pinia的category数据
import getCategoryStore from "@/stores/category";
//引入响应式数据pinia
import { storeToRefs } from "pinia";
//引入公共数据pinia
const categoryStore = getCategoryStore();
const { category3Id } = storeToRefs(categoryStore);

//emit
const emit = defineEmits(["change-view"]);
//切换spu
const changeViewHandler = () => {
  emit("change-view", VIEW_TYPE.SPU_FORM);
};
//0-1 定义数据
//0-1-1、spuList列表
const spuList = ref<recordsType[]>([]);
//1、初始数据请求
// 1.1定义页码
const page = ref<number>(1);
const limit = ref<number>(5);
const total = ref<number>(0);
const totalPage = ref<number>(0);
//1.2书写获取spu列表请求
const getSpuList = async () => {
  if (category3Id.value == "") return (spuList.value = []);
  try {
    let result = await api.reqSpuList(
      category3Id.value as number,
      page.value,
      limit.value
    );
    spuList.value = result.records;
    total.value = result.total;
    totalPage.value = result.pages;
    page.value = result.current;
    // console.log("result", result, category3Id);

    ElMessage.success("获取初始数据成功");
  } catch (e) {
    ElMessage.warning("获取初始数据失败");
  }
};
// watch(category3Id, getSpuList, { immediate: true });
watchEffect(getSpuList);
//2、form区域操作
// 2-1修改按钮跳转
const toEditHandler = (row: recordsType) => {
  // console.log("row", row);

  emit("change-view", VIEW_TYPE.SPU_FORM, row);
};
//2-2跳转sku
const toSkuHandler = (row: recordsType) => {
  emit("change-view", VIEW_TYPE.SKU_FORM, row);
};
//3、删除
const deleteHandler = async (id: number) => {
  try {
    await ElMessageBox.confirm("是否删除？", "提示");
    await api.reqDeleteSpuItem(id);
    getSpuList();
  } catch (e) {
    if (e !== "cancel") {
      ElMessage.warning("删除失败");
    }
  }
};
//dialog列表弹框
interface SpuItemType {
  category3Id: number;
  description: string;
  id: number;
  spuName: string;
  tmId: number;
}
const spuItem = ref<SpuItemType>({
  category3Id: 0,
  description: "",
  id: 0,
  spuName: "",
  tmId: 0,
});
//持续监听计算是否显示
const isDialog = computed({
  get() {
    return spuItem.value.id != 0;
  },
  set(newVal) {
    spuItem.value.id = 0;
  },
});
// const isDialog = computed(() => spuItem.value.id != 0);
// const isDialog = ref(false);
//获取详情数据
const detailList = ref<findBySpuIdType[]>();
const toDialog = async (row: recordsType) => {
  // isDialog.value = true;
  spuItem.value = row;
  try {
    detailList.value = await reqfindBySpuId(row.id);
  } catch (e) {
    ElMessage.error("获取出错");
  }
};
</script>
<style scoped></style>
